// https://github.com/Jxck/html2json
// var html2json = require('html2json').html2json;
// var json2html = require('html2json').json2html;
var pretty = require('pretty');

export default{
    install(Vue)
    {
        Vue.prototype.$layout =  this.layout;

        Vue.filter('htmlToJson', (value)=>{
            return this.layout.htmlToJson(value);
        })
        Vue.filter('jsonToHtml', (value)=>{
            return this.layout.jsonToHtml(value);
        })
        Vue.filter('formatHtml', (value)=>{
            return this.layout.formatHtml(value);
        })

    },
    layout:{
        row:'el-row',
        col:'el-col',
        //drag插件的数据 转换成html结构
        dragDataToHtml:function(data){
            let json = data.slice(0);
            //按y轴排序
            json.sort(function(x, y){
                return x['y']-y['y'];
            });
            //拼接布局
            let html = '',x=0,y=0,offset = 0,sumX=0;
            json.forEach((item)=>{
                //如果y跟上次的y等于 就说明换行了
                if(item.y!=y){
                    //本来的宽度是.若本来的宽度够一行,就直接当前行位移
                    if( (item.w+item.x) + sumX >24){
                        offset=item.x
                    }else{
                        //若不够的话.就需要凑一个空缺
                        html+=`<el-col :span="${24-sumX}" class="transparent" ></el-col>`;
                        offset=item.x;
                    }
                    sumX=0;
                }else {
                    //如果这次开始跟上次记录的位不一样, 就位移
                    if (item.x - x > 0)
                        offset = item.x - x;
                    else
                        offset = 0;
                }
                x = item.x+item.w;//记录这次用了多少位
                y = item.y;//记录当前第几行
                sumX=sumX+item.w+offset;//记录下 当前页用了多少了.
                let child ='';
                if(item.child) {
                    child = this.jsonToHtml(item.child);
                }
                html+=`<el-col :span="${item.w}" :offset="${offset}">${child}</el-col>`;
            })
            html = this.wrapperRow(html);
            return html;
        },
        //包装一层
        wrapperRow:function (html) {
            return `<el-row>`+html+'</el-row>';
        },


        // jsonToDragData(data){
        //处理下根节点
        // if(data['node']=='root')
        //     data = data['child'];
        //
        // //说明是节点.就处理数据
        // if(data['node']){
        //     switch (data['node']){
        //         case this.col:
        //
        //             break;
        //     }
        //
        //
        //
        // }else{
        //     //说明有多个并列元素,递归调用下
        //     // data.forEach((item)=>{
        //     //     // this.jsonToDragData(item['child']);
        //     // })
        // }
        // return data;
        // },

        //去掉无用的部分
        miniJson:function () {

        },


        htmlToJson:function (html) {
            // html=html.replace(/\n/g,"");
            // html=html.replace(/\t/g,"");
            var html2json = require('html2json').html2json;
            let json = html2json(html);
            return json;
            if( json.node=='root' ){
                return json.child;
            }else{
                return json;
            }
        },

        jsonToHtml:function (json) {
            var json2html = require('html2json').json2html;
            //没有root的强制加上.否则解析会出错
            if(json['node']!='root'){
                //child必须是数组
                if(!json.length){
                    json = [json];
                }
                json = {
                    "node": "root",
                    "child": json
                };
            }
            return json2html(json);
        },

        //把正常的Json.加上对应的拖拽数据
        jsonToDragJson:function (json) {
            if(!json)
                return [];
            json = JSON.parse(JSON.stringify(json));
            if(json[0]){
                json.forEach((item,index)=>{
                    json[index]=this.jsonToDragJson(item);
                })
            }else{
                //添加标签
                if(json.node=='element'){

                    json['child'] = this.jsonToDragJson(json['child']);
                    // return json;
                    return {
                        'node':'element',
                        'tag':'drag',
                        'attr':{
                            'class':['drag'],
                            '@drop':'handleDrop',
                            ':transfer-data':[33]
                        },
                        'child':[json]
                    };
                }
            }
            return json;
        },
        deepCopy:function(p, c) {
            c = c || {};
            for (let i in p) {
                if (typeof p[i] === 'object') {
                    c[i] = (p[i].constructor === Array) ? [] : {};
                    this.deepCopy(p[i], c[i]);
                } else {
                    c[i] = p[i];
                }
            }
            return c;
        },
        makeid:function(){
            var text = "";
            var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

            for( var i=0; i < 5; i++ )
                text += possible.charAt(Math.floor(Math.random() * possible.length));

            return text;
        },
        formatHtml:function (html) {
            return pretty(html);
        }


    },

    //拖拽模式
    dragModel:{

    }
}